import './Scroll.less';
import { useEffect, useRef, useState } from 'react';
import { List, Image, InfiniteScroll, PullToRefresh } from 'antd-mobile';

import { List as VirtualizedList, AutoSizer, WindowScroller } from 'react-virtualized';
const rem =
    Math.floor(
        ((document.documentElement.clientHeight > document.documentElement.clientWidth
            ? document.documentElement.clientWidth / 10
            : (document.documentElement.clientHeight / 10) * 0.7) *
            100) /
            37.5
    ) / 100;

const Scroll = (props) => {
    const [rowHeight, setRowHeight] = useState(props.itemHeight * rem);
    const scrollElm = useRef(null);
    const [element, setElement] = useState();

    useEffect(() => {
        setElement(scrollElm.current);
    }, [scrollElm.current]);

    return (
        <div className="scroll-list" ref={scrollElm}>
            <WindowScroller scrollElement={element}>
                {({ height, scrollTop, isScrolling }) => {
                    return props.isPullUp ? (
                        <PullToRefresh onRefresh={props.onRefresh} headHeight={50} threshold={80}>
                            <List>
                                <AutoSizer disableHeight>
                                    {({ width }) => (
                                        <VirtualizedList
                                            autoHeight
                                            rowCount={props.dataLength}
                                            rowRenderer={props.Row}
                                            width={width}
                                            height={height}
                                            rowHeight={rowHeight}
                                            overscanRowCount={5}
                                            isScrolling={isScrolling}
                                            scrollTop={scrollTop}
                                        ></VirtualizedList>
                                    )}
                                </AutoSizer>
                            </List>
                        </PullToRefresh>
                    ) : (
                        <List>
                            <AutoSizer disableHeight>
                                {({ width }) => (
                                    <VirtualizedList
                                        autoHeight
                                        rowCount={props.dataLength}
                                        rowRenderer={props.Row}
                                        width={width}
                                        height={height}
                                        rowHeight={rowHeight}
                                        overscanRowCount={5}
                                        isScrolling={isScrolling}
                                        scrollTop={scrollTop}
                                    ></VirtualizedList>
                                )}
                            </AutoSizer>
                        </List>
                    );
                }}
            </WindowScroller>
            {props.isPullTo && (
                <InfiniteScroll loadMore={props.onLoadMore} hasMore={props.isLoading} />
            )}
        </div>
    );
};

Scroll.defaultProps = {
    isLoading: false,
    isPullUp: true,
    itemHeight: 60,
    onRefresh: undefined,
    isPullTo: false,
    onLoadMore: () => {},
    loadingHeight: 40
};

export default Scroll;
